<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-lg p-6">
    <div>
      <label for="Notes">
        <span class="text-sm font-medium text-gray-700"> Notes </span>

        <textarea
          id="Notes"
          class="mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm"
          rows="4"
        ></textarea>
      </label>

      <div class="mt-1.5 flex items-center justify-end gap-2">
        <button
          type="button"
          class="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
        >
          Clear
        </button>

        <button
          type="button"
          class="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100"
        >
          Save
        </button>
      </div>
    </div>
  </body>
</html>
